<template>
  <div class="borrow-timeline">
    <el-timeline>
      <el-timeline-item 
        v-for="(record, index) in records" 
        :key="index"
        :timestamp="record.date" 
        :type="getTimelineItemType(record)"
        :icon="getTimelineIcon(record)"
        :color="getTimelineColor(record)"
        size="large"
      >
        <el-card 
          class="borrow-card" 
          :class="{ 'overdue': isOverdue(record), 'due-soon': isDueSoon(record) }"
        >
          <div class="book-info">
            <div class="book-cover">
              <img 
                v-if="record.book.coverUrl" 
                :src="record.book.coverUrl" 
                alt="Book Cover"
              >
              <div v-else class="cover-placeholder">
                <i class="el-icon-notebook-2"></i>
              </div>
            </div>
            <div class="book-details">
              <h3 class="book-title">{{ record.book.title }}</h3>
              <p class="book-author">{{ record.book.author }}</p>
              <p class="book-isbn">ISBN: {{ record.book.isbn }}</p>
            </div>
          </div>
          
          <div class="borrow-details">
            <div class="detail-row">
              <span class="label">借出日期:</span>
              <span class="value">{{ record.borrowDate }}</span>
            </div>
            <div class="detail-row">
              <span class="label">应还日期:</span>
              <span 
                class="value" 
                :class="{ 'overdue-text': isOverdue(record), 'due-soon-text': isDueSoon(record) }"
              >
                {{ record.dueDate }}
                <el-tag v-if="isOverdue(record)" size="mini" type="danger">逾期</el-tag>
                <el-tag v-else-if="isDueSoon(record)" size="mini" type="warning">即将逾期</el-tag>
              </span>
            </div>
            <div class="detail-row" v-if="record.returnDate">
              <span class="label">实际归还日期:</span>
              <span class="value">{{ record.returnDate }}</span>
            </div>
            <div class="detail-row" v-if="record.renewCount !== undefined">
              <span class="label">续借次数:</span>
              <span class="value">{{ record.renewCount }} / 3</span>
            </div>
            <div class="detail-row" v-if="record.fines && record.fines > 0">
              <span class="label">逾期罚款:</span>
              <span class="value fine-amount">¥ {{ record.fines.toFixed(2) }}</span>
            </div>
          </div>
          
          <div v-if="!record.returnDate" class="action-row">
            <el-button 
              type="primary" 
              size="small" 
              :disabled="record.renewCount >= 3"
              @click="handleRenew(record)"
            >
              续借
            </el-button>
            <el-button 
              type="success" 
              size="small"
              @click="handleReturn(record)"
            >
              归还
            </el-button>
            <el-button 
              type="warning" 
              size="small"
              @click="showLocation(record)"
            >
              查看位置
            </el-button>
          </div>
          
          <div v-if="isOverdue(record) && !record.returnDate" class="warning-box">
            <i class="el-icon-warning"></i>
            <span>该书已逾期 {{ getDaysOverdue(record) }} 天，请尽快归还或者续借，避免产生更多罚款。</span>
          </div>
          
          <div v-else-if="isDueSoon(record) && !record.returnDate" class="warning-box warning-box-soon">
            <i class="el-icon-time"></i>
            <span>该书将于 {{ getDaysUntilDue(record) }} 天后逾期，请注意归还或续借。</span>
          </div>
          
        </el-card>
      </el-timeline-item>
    </el-timeline>
    
    <!-- Empty state -->
    <div v-if="!records.length" class="empty-state">
      <el-empty description="暂无借阅记录">
        <el-button type="primary" @click="$emit('browse-books')">浏览图书</el-button>
      </el-empty>
    </div>
    
    <!-- Book location map dialog -->
    <el-dialog
      title="图书位置"
      :visible.sync="locationDialogVisible"
      width="80%"
      :close-on-click-modal="false"
      custom-class="location-dialog"
    >
      <div class="location-content">
        <div class="floor-map">
          <img 
            src="@/assets/images/library-map.png" 
            alt="Library Floor Map"
            class="floor-map-image"
          >
          <div 
            class="location-marker" 
            :style="{ left: currentLocation.x + '%', top: currentLocation.y + '%' }"
          >
            <i class="el-icon-location"></i>
          </div>
        </div>
        <div class="location-info">
          <h3>位置信息</h3>
          <div class="info-row">
            <span class="info-label">楼层:</span>
            <span class="info-value">{{ currentLocation.floor }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">区域:</span>
            <span class="info-value">{{ currentLocation.area }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">书架号:</span>
            <span class="info-value">{{ currentLocation.shelfNumber }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">层数:</span>
            <span class="info-value">{{ currentLocation.level }}</span>
          </div>
          <div class="info-tips">
            <i class="el-icon-info"></i>
            <span>可以在手机上使用 AR 功能，为您提供实时导航。</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'BorrowTimeline',
  props: {
    records: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {
      locationDialogVisible: false,
      currentLocation: {
        x: 50,
        y: 50,
        floor: '3楼',
        area: '科技区',
        shelfNumber: 'B-12',
        level: '3层'
      }
    }
  },
  methods: {
    getTimelineItemType(record) {
      if (record.returnDate) return 'success'
      if (this.isOverdue(record)) return 'danger'
      if (this.isDueSoon(record)) return 'warning'
      return 'primary'
    },
    getTimelineIcon(record) {
      if (record.returnDate) return 'el-icon-check'
      if (this.isOverdue(record)) return 'el-icon-warning'
      if (this.isDueSoon(record)) return 'el-icon-time'
      return 'el-icon-notebook-2'
    },
    getTimelineColor(record) {
      if (record.returnDate) return '#5C8D89' // eco green
      if (this.isOverdue(record)) return '#F56C6C' // danger red
      if (this.isDueSoon(record)) return '#D4AF37' // gold
      return '#2A3B4D' // deep blue
    },
    isOverdue(record) {
      if (record.returnDate) return false
      
      const now = new Date()
      const dueDate = new Date(record.dueDate)
      return dueDate < now
    },
    isDueSoon(record) {
      if (record.returnDate) return false
      if (this.isOverdue(record)) return false
      
      const now = new Date()
      const dueDate = new Date(record.dueDate)
      const diffDays = Math.ceil((dueDate - now) / (1000 * 60 * 60 * 24))
      
      return diffDays <= 3
    },
    getDaysOverdue(record) {
      const now = new Date()
      const dueDate = new Date(record.dueDate)
      return Math.ceil((now - dueDate) / (1000 * 60 * 60 * 24))
    },
    getDaysUntilDue(record) {
      const now = new Date()
      const dueDate = new Date(record.dueDate)
      return Math.ceil((dueDate - now) / (1000 * 60 * 60 * 24))
    },
    handleRenew(record) {
      this.$emit('renew', record)
    },
    handleReturn(record) {
      this.$emit('return', record)
    },
    showLocation(record) {
      // Simulate random coordinates for the book location
      this.currentLocation = {
        ...this.currentLocation,
        x: 30 + Math.random() * 40,
        y: 30 + Math.random() * 40
      }
      this.locationDialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.borrow-timeline {
  padding: 20px 0;
  
  .el-timeline-item {
    padding-bottom: 30px;
    
    &:last-child {
      padding-bottom: 0;
    }
  }
  
  .borrow-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s cubic-bezier(.25,.1,.25,1);
    position: relative;
    overflow: visible;
    
    &:hover {
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    }
    
    &.overdue {
      border-left: 4px solid #F56C6C;
    }
    
    &.due-soon {
      border-left: 4px solid #E6A23C;
    }
    
    .book-info {
      display: flex;
      margin-bottom: 16px;
      
      .book-cover {
        width: 60px;
        height: 90px;
        border-radius: 4px;
        overflow: hidden;
        margin-right: 16px;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        .cover-placeholder {
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, $deepBlue 0%, lighten($deepBlue, 20%) 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          color: $ivoryWhite;
          
          i {
            font-size: 24px;
          }
        }
      }
      
      .book-details {
        flex: 1;
        
        .book-title {
          margin: 0 0 8px;
          font-family: 'Montserrat', sans-serif;
          font-weight: 600;
          font-size: 16px;
          color: $deepBlue;
        }
        
        .book-author, .book-isbn {
          margin: 0 0 4px;
          font-family: 'Open Sans', sans-serif;
          font-size: 14px;
          color: $graphiteGray;
        }
      }
    }
    
    .borrow-details {
      border-top: 1px solid $lightDivider;
      border-bottom: 1px solid $lightDivider;
      padding: 12px 0;
      margin-bottom: 16px;
      
      .detail-row {
        display: flex;
        margin-bottom: 8px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .label {
          width: 100px;
          font-family: 'Roboto', sans-serif;
          font-weight: 300;
          font-size: 14px;
          color: $graphiteGray;
        }
        
        .value {
          flex: 1;
          font-family: 'Open Sans', sans-serif;
          font-size: 14px;
          color: $deepBlue;
          
          &.overdue-text {
            color: #F56C6C;
            font-weight: 600;
          }
          
          &.due-soon-text {
            color: #E6A23C;
            font-weight: 600;
          }
          
          &.fine-amount {
            color: #F56C6C;
            font-weight: 600;
          }
          
          .el-tag {
            margin-left: 8px;
          }
        }
      }
    }
    
    .action-row {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }
    
    .warning-box {
      margin-top: 16px;
      padding: 12px;
      background-color: rgba(245, 108, 108, 0.1);
      border-radius: 4px;
      display: flex;
      align-items: center;
      
      i {
        font-size: 18px;
        color: #F56C6C;
        margin-right: 8px;
      }
      
      span {
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
        color: #F56C6C;
      }
      
      &.warning-box-soon {
        background-color: rgba(230, 162, 60, 0.1);
        
        i, span {
          color: #E6A23C;
        }
      }
    }
  }
  
  .empty-state {
    padding: 40px 0;
    text-align: center;
  }
}

.location-dialog {
  .location-content {
    display: flex;
    gap: 20px;
    
    @media screen and (max-width: 768px) {
      flex-direction: column;
    }
    
    .floor-map {
      flex: 2;
      position: relative;
      
      .floor-map-image {
        width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
      
      .location-marker {
        position: absolute;
        width: 40px;
        height: 40px;
        margin-left: -20px;
        margin-top: -40px;
        animation: pulse 2s infinite;
        
        i {
          font-size: 40px;
          color: #F56C6C;
          filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
        }
      }
    }
    
    .location-info {
      flex: 1;
      padding: 20px;
      background-color: rgba($deepBlue, 0.05);
      border-radius: 8px;
      
      h3 {
        margin: 0 0 16px;
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 18px;
        color: $deepBlue;
      }
      
      .info-row {
        display: flex;
        margin-bottom: 12px;
        
        .info-label {
          width: 80px;
          font-family: 'Roboto', sans-serif;
          font-weight: 300;
          font-size: 14px;
          color: $graphiteGray;
        }
        
        .info-value {
          flex: 1;
          font-family: 'Open Sans', sans-serif;
          font-size: 16px;
          color: $deepBlue;
          font-weight: 600;
        }
      }
      
      .info-tips {
        margin-top: 20px;
        padding: 12px;
        background-color: rgba($goldAccent, 0.1);
        border-radius: 4px;
        display: flex;
        align-items: center;
        
        i {
          font-size: 18px;
          color: $goldAccent;
          margin-right: 8px;
        }
        
        span {
          font-family: 'Open Sans', sans-serif;
          font-size: 14px;
          color: $deepBlue;
        }
      }
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@media screen and (max-width: 576px) {
  .borrow-timeline {
    .borrow-card {
      .book-info {
        flex-direction: column;
        
        .book-cover {
          width: 100%;
          height: 150px;
          margin-right: 0;
          margin-bottom: 16px;
        }
      }
      
      .borrow-details {
        .detail-row {
          flex-direction: column;
          
          .label {
            width: 100%;
            margin-bottom: 4px;
          }
        }
      }
      
      .action-row {
        flex-direction: column;
        gap: 8px;
        
        .el-button {
          width: 100%;
        }
      }
    }
  }
}
</style> 